<template>
	<view style="min-height: 100vh;background: #F9C73B;padding-bottom: 236rpx;padding-top: 26rpx;">
		<view class="wrap" @click="posterHide()">
			<view class="bg"><img :src="shareImage" /></view>
			<view class="content">
				<view class="contTitle">我的伙伴</view>
				<view class="contTitleE"><text>My Partner</text></view>
				<view class="list">
					<view class="listItem">
						<view class="itemTitle" @click.stop="tip('0')">
							<text>今日新增</text>
							<image mode="aspectFit" :src="img" style="width: 30rpx;height: 33rpx;margin-left: 6rpx;" />
						</view>

						<view class="num" @click.stop="add()" style="color: #eb7800;">{{ todayAdd }}</view>
						<view class="tip" v-show="flag[0].tag" style="left: 86rpx"><view>通过您的分享，今日加入聚友趣小程序的伙伴</view></view>
					</view>
					<view class="listItem">
						<view class="itemTitle" @click.stop="tip('1')">
							<text>本月新增</text>
							<image mode="aspectFit" :src="img" style="width: 30rpx;height: 33rpx;margin-left: 6rpx;" />
						</view>

						<view class="num">{{ monthAdd }}</view>
						<view class="tip" v-show="flag[1].tag"><view>通过您的分享，本月加入聚友趣小程序的伙伴</view></view>
					</view>
					<view class="listItem">
						<view class="itemTitle" @click.stop="tip('2')">
							<text>累计新增</text>
							<image mode="aspectFit" :src="img" style="width: 30rpx;height: 33rpx;margin-left: 6rpx;" />
						</view>

						<view class="num">{{ totalAdd }}</view>
						<view class="special">
							<view class="tipT" style="right: 0rpx;" v-show="flag[2].tag">
								<view class="triangle">通过您的分享，累计加入聚友趣小程序的伙伴</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="button_userkeeper_bottom" @click="showShareButton">
				<img src="https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/partner.png" />
				<!-- <button type="primary" class="btn baseBtn" :disabled="disabled">呼换好友</button> -->
			</view>

			<!-- 分享弹窗-->
			<view class="share-pro" v-if="showShare">
				<view class="share-pro-mask" @tap="showShare = false"></view>
				<view class="share-pro-dialog" :class="showShare ? 'open' : 'close'">
					<!-- <view class="share-pro-title">分享给好友</view> -->
					<view class="share-pro-body">
						<view class="share-item">
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="share"><view class="wechat"></view></button>
							<text class="text">分享好友</text>
							<!-- #endif -->
						</view>
						<view class="share-item" @tap="showPoster">
							<view class="font_family share-icon">&#xe600;</view>
							<text class="text">生成图片</text>
						</view>
					</view>
					<button type="default" class="share-cancel" @tap="showShare = false">取消</button>
				</view>
			</view>
			<loading ref="loading"></loading>
		</view>
		<Poster v-if="show"></Poster>
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
	</view>
</template>

<script>
import http from '@/common/request.js';
import Poster from './sharePoster.vue';
import Loading from '@/components/notice/loading.vue';
import { checkLogin, unLoginAction } from '@/common/utils.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
export default {
	onShareAppMessage() {
		const { userId, nickName } = this.$store.state.userInfo;
		const params = encodeURIComponent('uid=' + userId);
		this.showShare = false;
		this.share();
		return { title: '你的好友' + nickName + '邀请你加入聚友趣', path: '/pages/home/index?scene=' + params, imageUrl: this.shareImage };
	},
	components: {
		Poster,
		Loading,
		popupActive
	},
	mounted() {
		this.listBanner();
	},
	onLoad(opt) {
		uni.loadFontFace({
			family: 'hanyi',
			source: 'url("https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/HYQiHei-45S.otf")',
			success() {}
		});
		uni.loadFontFace({
			family: 'Myriad',
			source: 'url("https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/MyriadVariableConcept-Italic.otf")',
			success() {}
		});
		uni.loadFontFace({
			family: 'bahnschrift',
			source: 'url("https://domestic-rongchuang.oss-cn-beijing.aliyuncs.com/home/images/bahnschrift.ttf")',
			success() {}
		});
		const userSource = opt.userSource || '';
		if (userSource) {
			this.$store.commit('STORE_USERSOURCE', userSource);
		}
	},
	data() {
		return {
			show: false,
			todayAdd: 0,
			monthAdd: 0,
			totalAdd: 0,
			img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/qm.png',
			msg: '',
			flag: [
				{
					tag: false
				},
				{
					tag: false
				},
				{
					tag: false
				}
			],
			showShare: false,
			shareImage: '',
			popScreenList: [],
			showHonor: false
		};
	},
	onBackPress() {
		if (this.show) {
			this.show = false;
			return true;
		}
		if (this.showShare) {
			this.showShare = false;
			return true;
		}
	},
	onShow() {
		this.getScreenPopInfo();
	},
	methods: {
		posterHide() {
			this.flag.forEach(item => {
				item.tag = false;
			});
		},
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				}
			});
		},
		getScreenPopInfo() {
			http('api/sysShareBannerInfo/getAsyncDoneTaskPopScreen', { method: 'GET' }).then(result => {
				if (result.code == 200) {
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		showShareButton() {
			// #ifdef MP-WEIXIN
			checkLogin().then(res => {
				if (res) {
					this.showShare = true;
				} else {
					unLoginAction();
				}
			});
			// #endif
			// #ifdef H5
			this.showShare = true;
			// #endif
		},
		showPoster() {
			uni.navigateTo({
				url: '/personal/sharePoster',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		listBanner() {
			http('/api/sysShareBannerInfo/getShareBanner', { data: {}, method: 'GET' }).then(result => {
				if (result.code == '200') {
					this.shareImage = result.data[0].imgUrl;
				}
			});
			http('/api/sysShareBannerInfo/getShareUserCount', { data: {}, method: 'GET' }).then(result => {
				if (result.code == '200') {
					this.todayAdd = result.todayCount;
					this.monthAdd = result.monthCount;
					this.totalAdd = result.totalCount;
				}
			});
		},
		add() {
			if (this.todayAdd) {
				uni.navigateTo({
					url: '/personal/shareNum',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},
		share() {
			http('/api/cusUserShare', { data: {}, method: 'POST' }).then(result => {
				if (result.code == '200') {
				}
			});
		},
		tip(num) {
			this.flag.forEach(item => {
				item.tag = false;
			});
			this.flag[num].tag = true;
			setTimeout(() => {
				this.flag[num].tag = false;
			}, 3000);
		}
	}
};
</script>

<style lang="less" scoped>
/* 按钮去掉边框 */
button::after {
	border: none;
}
button {
	color: #66645d;
}
.bg {
	// margin: 40rpx;
	overflow: hidden;
	/deep/.banner-dots {
		display: none !important;
	}
	img {
		height: 438rpx;
		border-radius: 20rpx;
		width: 100%;
	}
}
.wrap {
	background: #fff;
	margin: 0rpx 28rpx;
	padding: 24rpx;
	border-radius: 20rpx;
}
.content {
	background: #fff;
	// padding-bottom: 266rpx;
	.contTitle {
		font-size: 50rpx;
		color: #1b1913;
		padding-top: 96rpx;
		text-align: center;
		font-family: 'hanyi';
		font-style: italic;
	}
	.contTitleE {
		font-size: 32rpx;
		color: #9c9d9d;
		text-align: center;
		margin: 28rpx 0 72rpx 0;
		text {
			width: 92rpx;
			display: inline-block;
			font-family: 'Myriad';
		}
	}
	.list {
		display: flex;
		justify-content: space-around;
		.listItem {
			text-align: center;
			position: relative;
			.itemTitle {
				font-size: 30rpx;
				color: #9c9d9d;
				margin-bottom: 92rpx;
				display: flex;
				align-items: center;
				img {
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					right: -40rpx;
					padding: 0 6rpx;
				}
			}
			.num {
				font-size: 75rpx;
				color: #9c9d9d;
				// line-height: 60rpx;
				font-family: 'bahnschrift';
				padding: 14rpx 0 232rpx 0;
			}
			.special {
				.tipT {
					background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/tipBg.png) no-repeat;
					background-size: 100% 100%;
					transform: scale(-1, 1);
					width: 400rpx;
					font-size: 24rpx;
					color: #fff;
					padding: 30rpx 24rpx 18rpx 24rpx;
					line-height: 40rpx;
					position: absolute;
					top: 40rpx;
					color: #eb7800;
					z-index: 99;
					text-align: left;
					.triangle {
						transform: scale(-1, 1);
					}
				}
			}
			.tip {
				background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/tipBg.png) no-repeat;
				background-size: 100% 100%;
				width: 400rpx;
				font-size: 24rpx;
				color: #fff;
				padding: 30rpx 24rpx 18rpx 24rpx;
				line-height: 40rpx;
				position: absolute;
				top: 40rpx;
				color: #eb7800;
				z-index: 99;
				text-align: left;
			}
		}
	}
}
.button_userkeeper_bottom {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -140rpx;
	img {
		width: 300rpx;
		height: 300rpx;
	}
}
uni-button[disabled] {
	background-color: #f1f1f1 !important;
	color: #ccc !important;
}
.baseBtn[disabled] {
	background-color: #f1f1f1 !important;
	color: #ccc !important;
}
</style>
